<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <div class="common">
            <div class="userIcon">
                <!-- <img src="./img/avatar1.png" alt=""> -->
            </div>
        </div>
        <div class="userList">
            <div class="user">
                用户列表
            </div>
            <div class="userItem" >
                <!-- <div class="users">
                    <div class="users_img">
                        <img src="./img/avatar1.png" alt="">
                    </div>
                    <div class="users_nickname">啊啊啊啊啊啊啊啊</div>
                </div>
                <div class="users">
                    <div class="users_img">
                        <img src="./img/avatar1.png" alt="">
                    </div>
                    <div class="users_nickname">qweq</div>
                </div>
                <div class="users">
                    <div class="users_img">
                        <img src="./img/avatar1.png" alt="">
                    </div>
                    <div class="users_nickname">qweq</div>
                </div> -->
            </div>
        </div>
        <div class="chat">
            <div class="userName">聊天室</div>

            <div class="content">
                <!-- <div class="other">
                    <div class="img"><img src="./img/avatar1.png" alt=""></div>
                    <div class="right">
                        <div class="nickname">jjjj</div>
                        <div class="talkContent">fafadafafadasadadfafadasadadfafadasadadfafadasadadfafadasadadfafadasadadfafadasadadfafadasadadsadad</div>
                    </div>
                </div>
                <div class="own">
                    <div class="img"><img src="./img/avatar1.png" alt=""></div>
                    <div class="left">
                        <div class="nickname">jjjj</div>
                        <div class="talkContent">fafadasadadfafadasadafafadasadadfafadasadaddfafadasadadfafadasadadfafadasadad</div>
                    </div>
                </div>
                <div class="system"><span>用户进来了</span></div>
                <div class="other">
                    <div class="img"><img src="./img/avatar1.png" alt=""></div>
                    <div class="right">
                        <div class="nickname">j</div>
                        <div class="talkContent">f</div>
                    </div>
                </div>
                <div class="other">
                    <div class="img"><img src="./img/avatar1.png" alt=""></div>
                    <div class="right">
                        <div class="nickname">jjjj</div>
                        <div class="talkContent">fafadasadad</div>
                    </div>
                </div> -->
            </div>
            <div class="edit" style="display: flex">
                <div class="expressionbox">
                    <table> 
                        <tr>
                            <td><img src="./img/emoji/1.gif" alt=""></td>
                            <td><img src="./img/emoji/2.gif" alt=""></td>
                            <td><img src="./img/emoji/3.gif" alt=""></td>
                            <td><img src="./img/emoji/4.gif" alt=""></td>
                            <td><img src="./img/emoji/5.gif" alt=""></td>
                            <td><img src="./img/emoji/6.gif" alt=""></td>
                        </tr>
                        <tr>
                            <td><img src="./img/emoji/7.gif" alt=""></td>
                            <td><img src="./img/emoji/8.gif" alt=""></td>
                            <td><img src="./img/emoji/9.gif" alt=""></td>
                            <td><img src="./img/emoji/10.gif" alt=""></td>
                            <td><img src="./img/emoji/11.gif" alt=""></td>
                            <td><img src="./img/emoji/12.gif" alt=""></td>
                        </tr>
                        <tr>
                            <td><img src="./img/emoji/13.gif" alt=""></td>
                            <td><img src="./img/emoji/14.gif" alt=""></td>
                            <td><img src="./img/emoji/15.gif" alt=""></td>
                            <td><img src="./img/emoji/16.gif" alt=""></td>
                            <td><img src="./img/emoji/17.gif" alt=""></td>
                            <td><img src="./img/emoji/18.gif" alt=""></td>
                        </tr>
                        <tr>
                            <td><img src="./img/emoji/19.gif" alt=""></td>
                            <td><img src="./img/emoji/20.gif" alt=""></td>
                            <td><img src="./img/emoji/21.gif" alt=""></td>
                            <td><img src="./img/emoji/22.gif" alt=""></td>
                            <td><img src="./img/emoji/23.gif" alt=""></td>
                            <td><img src="./img/emoji/24.gif" alt=""></td>
                        </tr>
                        <tr>
                            <td><img src="./img/emoji/25.gif" alt=""></td>
                            <td><img src="./img/emoji/26.gif" alt=""></td>
                            <td><img src="./img/emoji/27.gif" alt=""></td>
                            <td><img src="./img/emoji/28.gif" alt=""></td>
                            <td><img src="./img/emoji/29.gif" alt=""></td>
                            <td><img src="./img/emoji/30.gif" alt=""></td>
                        </tr>
                        <tr>
                            <td><img src="./img/emoji/31.gif" alt=""></td>
                            <td><img src="./img/emoji/32.gif" alt=""></td>
                            <td><img src="./img/emoji/33.gif" alt=""></td>
                            <td><img src="./img/emoji/34.gif" alt=""></td>
                            <td><img src="./img/emoji/35.gif" alt=""></td>
                            <td><img src="./img/emoji/36.gif" alt=""></td>
                        </tr>
                    </table>
                </div>
                <div class="column">
                    <div class="icon icon1"></div>
                    <div class="icon icon2"></div>
                    <div class="icon icon3"></div>
                    <div class="icon icon4"></div>
                </div>
                <div name="txt" contenteditable="true" class="edit_div">
                </div>
                <button class="sendBtn">发送</button>
            </div>

        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
<!--    <script src="./index.js"></script>-->
    <script>
        let baseURL = 'http://127.0.0.1:8888';
        // let baseURL = '192.168.18.185:8888';

        //用户信息
        let userInfo={};
        //根据路径解析用户名和头像(?a=1&b=1)
        location.search.substring(1).split('&').forEach(item=>{
            //url中有中文通过decodeURI解码
            let [a,b] =decodeURI(item).split('=');
            userInfo[a] = b;
        })

        console.log(userInfo)
        //连接websocket服务器
        let socket = io(`${baseURL}`);
        let divContent = document.querySelector('.content');
        let sendBtn = document.querySelector('.sendBtn');
        let chatContent = document.querySelector('.edit_div');

        document.querySelector('.userIcon').innerHTML = `<img src=".${userInfo.avatar}" alt="">`


        //表情包选择
        document.querySelector('.edit .icon:nth-child(1)').onclick = function (){
            if (document.querySelector('.expressionbox').style.display === 'block'){
                document.querySelector('.expressionbox').style.display = 'none';
                return;
            }
            document.querySelector('.expressionbox').style.display = 'block';
        }

        //表情包选择
          //方框
        document.querySelectorAll('.expressionbox img').forEach((item,index)=>{
            item.onclick = function (){
                let content = document.querySelector('.edit_div');
                content.innerHTML += `<img src="./img/emoji/${index+1}.gif" width="28px" style="vertical-align: bottom"/>`;
            }
        })

        //----------------
        //登录
        socket.emit('login',userInfo);

        //监听addUsr事件
        socket.on('addUsr', function (data) {
            let {io_account, usersList} = data;
            //用户列表
            let userLIst = document.querySelector('.userList>.userItem');
            //内容栏
            divContent.innerHTML += `<div class="system"><span>${io_account}加入群聊</span></div>`;
            document.querySelector('.system:nth-last-child(1)').scrollIntoView(false);
            userLIst.innerHTML = usersList.map((item) => {
                return `<div class="users">
                        <div class="users_img"><img src="${item.io_avatar}"/></div>
                        <div class="users_nickname">${item.io_account}</div>
                    </div>`;
            }).join('');
            document.querySelector('.userItem>div:nth-last-child(1)').scrollIntoView(false);

            //
            document.querySelector('.userName').innerHTML = `聊天室（${usersList.length}）`;
        })

        //发送
        sendBtn.onclick = function () {
            let obj = {
                ...userInfo,
                data:chatContent.innerHTML
            };
            socket.emit('sendMsg', obj);
            chatContent.innerHTML = '';
        }
        //收到注释
        socket.on('msg', function (data) {
            //自己发的
            if (userInfo.account === `${data.account}`) {
                divContent.innerHTML += `<div class="own">
                                    <div class="img"><img src="${data.avatar}"/></div>
                                    <div class="left">
                                        <div class="nickname">${data.account}</div>
                                        <div class="talkContent">${data.data}</div>
                                    </div>
                                </div>`;
                document.querySelector('.content>div:nth-last-of-type(1)').scrollIntoView(false);
            } else {
                divContent.innerHTML += `<div class="other">
                                    <div class="img"><img src="${data.avatar}"/></div>
                                    <div class="right">
                                        <div class="nickname">${data.account}</div>
                                        <div class="talkContent">${data.data}</div>
                                    </div>
                                </div>`;
                document.querySelector('.content>div:nth-last-of-type(1)').scrollIntoView(false);
            }
        })

        //用户离开
        socket.on('someoneLeave', (data) => {
            let {account,usersList} = data;
            let userLIst = document.querySelector('.userList>.userItem');
            divContent.innerHTML += `<div class="system"><span>${account}离开群聊</span></div>`;
            userLIst.innerHTML = data.usersList.map((item) => {
                return `<div class="users">
                        <div class="users_img"><img src="${item.io_avatar}"/></div>
                        <div class="users_nickname">${item.io_account}</div>
                    </div>`;
            }).join('');
            document.querySelector('.userName').innerHTML = `聊天室（${usersList.length}）`;
        });
    </script>
</body>

</html>